<!DOCTYPE html>
<!-- saved from url=(0061)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>淘宝商品广告效果</title>
	<style>
		html, body, ul {
			margin: 0;
			padding: 0;
		}
		img {
			border: 0;
			float: left;
			margin: 0 5px;
		}
		li {
			list-style: none;
			border: 1px solid #FFADAD;
			width: 40px;
			padding: 5px;
			text-align: center;
			font-size: 12px;
		}
		a {
			text-decoration: none;
			display: block;
			color: #000;
		}
		#wrap {
			border: 1px solid #FF6300;
			padding: 5px;
			overflow: hidden;
			width: 294px;
			margin: 50px auto;
		}
		#left {
			float: left;
		}
		#right {
			float: left;
			right: 0;
			top: 0;
		}
	</style>
	<script>
		window.onload = function(){
			var oImg = document.getElementsByTagName('img')[0],
				aLi = document.getElementsByTagName('li'),
				timer = null,
				img = ['8-img/1.png', '8-img/2.png', '8-img/3.png', '8-img/4.png', '8-img/5.png', '8-img/6.png', '8-img/7.png', '8-img/8.png', '8-img/9.png', '8-img/10.png', '8-img/11.png', '8-img/12.png', '8-img/13.png', '8-img/14.png'],
				num = 0,
				flag = 0;

			function clearAll(){
				for(var i=0; i<aLi.length; i++){
					aLi[i].style.background = '#fff';
					aLi[i].getElementsByTagName('a')[0].style.color = '#000';
				}
			}

			for(var i=0; i<aLi.length; i++){
				aLi[i].index = i;
				aLi[i].onmouseout = function(){
					this.style.background = '#FFF';
					this.getElementsByTagName('a')[0].style.color = '#000';
					timer = setInterval(autoplay, 1000);
				}
				aLi[i].onmouseover = function(){
					clearInterval(timer);
					clearAll();
					this.style.background = '#FF4A6B';
					this.getElementsByTagName('a')[0].style.color = '#fff';
					oImg.src = img[this.index];
				}
			}

			function autoplay(){
				clearAll();

				aLi[num].style.background = '#FF4A6B';
				aLi[num].getElementsByTagName('a')[0].style.color = '#fff';
				oImg.src = img[num];

				if(num<aLi.length/2){
					num++;
					if (num == aLi.length/2) {
						num = aLi.length - 1;
					}
				} else {
					num--;
					if (num == aLi.length/2 - 1) {
						num = 0;
					}
				}
			}

			timer = setInterval(autoplay, 1000);
			
		}
	</script>
</head>
<body>
	<div id="wrap">
		<ul id="left">
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">连衣裙</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">雪纺</a></li>
			<li style="background: rgb(255, 74, 107);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(255, 255, 255);">T恤</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">铅笔裤</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">婚纱</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">外套</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">连体裤</a></li>
		</ul>
		<img src="./淘宝商品广告效果_files/3.png">
		<ul id="right">
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">包包</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">凉鞋</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">单鞋</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">太阳镜</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">丝袜</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">帆布鞋</a></li>
			<li style="background: rgb(255, 255, 255);"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-3-1.html#" style="color: rgb(0, 0, 0);">情侣装</a></li>
		</ul>
	</div>

<div id="__nightingale_view_cover" style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2147483647; opacity: 0; background: rgb(0, 0, 0) !important;"></div></body></html>